/* * @Author: Yejing * @Date: 2023-06-06 18:21:02 * @LastEditors: Yejing * @LastEditTime: 2023-06-12 16:33:11 * @Description: 主播页面 */
<template>
	<view class="visitor-page">
		<c-layout>
			<!-- 头部 -->
			<c-navigation-bar :title="followUrlData.title" :is-search="followUrlData.type == 'bubble' ? false : true"></c-navigation-bar>

			<view class="container-box">
				<view class="title" v-if="followUrlData.type == 'shop' || followUrlData.type == 'hot'">
					<text v-if="followUrlData.type == 'shop'">
						{{ followUrlData.title2 }}
					</text>
					<u-tabs
						class="tabs-type-blue"
						v-if="followUrlData.type == 'hot'"
						:list="tabsType.list"
						:active-item-style="tabsType.activeItem"
						:show-bar="false"
						:is-scroll="true"
						:current="tabsType.current"
						@change="changeTabs"
					></u-tabs>
				</view>

				<view class="list" v-for="item in list" @click="goAnchorHomepage(item.id)" :key="item.id">
					<view class="left">
						<u-avatar size="160" :src="$u.file.getMedieUrl(item.avatar)" mode="square"></u-avatar>
						<view class="info">
							<text>{{ item.nickName }}</text>
							<text>{{ item.personalIntroduction }}</text>
						</view>
					</view>
					<text class="flex-bottom" v-if="item.concernTime">{{ item.concernTime }}</text>
					<text v-else>{{ item.concernTime }}</text>
					{{publicJS.timeZoneSwitching(item.browseDate,"DD/MM/YYYY")}}
				</view>
			</view>

			<divider v-show="total==list.length"></divider>
		</c-layout>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//搜索
			search: {
				navThmen: 'line',
				navPlaceholder: 'Donate for'
			},
			groupList: [
				{
					img: require('static/images/home/girl.png'),
					text: 'Kristine'
				},
				{
					img: require('static/images/home/girl.png'),
					text: 'Kristine'
				},
				{
					img: require('static/images/home/girl.png'),
					text: 'Kristine'
				},
				{
					img: require('static/images/home/girl.png'),
					text: 'Kristine'
				},
				{
					img: require('static/images/home/girl.png'),
					text: 'Kristine'
				}
			],
			list: [],
			followUrlData: {},
			tabsType: {
				list: [
					{
						name: '健美'
					},
					{
						name: '跳舞'
					},
					{
						name: '教育'
					},
					{
						name: '组成'
					}
				],
				current: 0,
				activeItem: {
					background: '#2934D0',
					color: '#fff !important'
				}
			},
			pagingObj: {
				pageSize: 20,
				pageNum: 1
			},
			total: 0
		};
	},
	onLoad(val) {
		this.followUrlData = val;
		if (this.followUrlData.type == 'shop') {
			this.getVisiter();
		} else {
			this.getList(this.followUrlData.type, this.pagingObj);
		}
	},
	methods: {
		//获取访客列表
		getVisiter() {
			this.pagingObj.shopId=uni.getStorageSync('vuexShopId')
			this.$u.post('/app/shop/browseShop/page',this.pagingObj).then((res) => {
				this.list = [...this.list, ...res.data.records];
				this.total = res.data.total;
			});
		},
		//获取数据
		getList(type, pagingObj) {
			this.$u.post('/app/user/concern/page/' + type, pagingObj).then((res) => {
				this.list = [...this.list, ...res.data.records];
				this.total = res.data.total;
			});
		},
		//切换
		changeTabs(index) {
			this.tabsType.current = index;
		},
		//搜索
		searchEvent(val) {},
		//热门主播主页
		// goAnchorHomepage() {
		//     this.$u.route('/pages/searchInfo/components/anchorCard/anchorHomepage/index', {
		//         type: this.followUrlData.type
		//     });
		// }

		//访客个人主页
		goAnchorHomepage(item) {
			if (this.followUrlData.type == 'shop') {
				return
			}else{
				this.$u.route('/pages/searchInfo/components/anchorCard/anchorHomepage/index', {
					type: this.followUrlData.type
				});
			}
			
		}
	},
	onReachBottom() {
		if (this.list.length == this.total) {
			return;
		}
		this.pagingObj.pageNum += 1;
		this.getList(this.followUrlData.type, this.pagingObj);
	}
};
</script>

<style lang="scss" scoped>
.visitor-page {
	.title {
		color: #1b1d29;
		font-size: 30rpx;
		padding: 36rpx 0;
	}

	.group {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		overflow-y: scroll;

		.person {
			text-align: center;
			margin-right: 40rpx;

			uni-text {
				font-size: 26rpx;
				margin-top: 15rpx;
			}
		}
	}

	.list {
		display: flex;
		width: 100%;
		justify-content: space-between;
		font-size: 22rpx;
		color: #91909a;
		margin-bottom: 50rpx;
		position: relative;

		.left {
			display: flex;
			width: calc(100% - 240rpx);
			
			.info {
				margin-left: 38rpx;
				width: calc(100% - 200rpx);

				uni-text {
					&:nth-child(1) {
						color: #1b1d29;
						font-size: 26rpx;
					}

					&:nth-child(2) {
						margin-top: 10rpx;
						display: -webkit-box;
						display: -moz-box;
						white-space: pre-wrap;
						word-wrap: break-word;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						/* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
						-webkit-line-clamp: 2;
					}
				}
			}
		}

		.flex-bottom {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	/deep/ uni-image {
		border: 3px solid #2e8ce3;
		width: 128rpx;
		height: 128rpx;
		border-radius: 50% !important;
		padding: 8rpx;

		div {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}
	}

	uni-text {
		display: block;
	}
}
</style>
